MB01!

Plot = import("https://esm.sh/@observablehq/plot@0.6.13")
// Below makes the data easier to access
d = transpose(data)

// Anything less than 10 unique values will be treated as categorical!
distinct_cutoff = 10

// Huh below turns categorical vars into a dropdown list
disc_types = ['string', 'boolean']
disc_vars = vars.filter(d => disc_types.includes(d.type) && d.statistics.numDistinct <= distinct_cutoff).map(d => [d.label ? d.label : d.name, d.name])
disc_opts = new Map([['', null]].concat(disc_vars))

// And below creates dropdowns for continuous variables
cont_types = ['integer', 'float', 'date', 'datetime', 'time']
cont_vars = vars.filter(d => cont_types.includes(d.type) && d.statistics.numDistinct > distinct_cutoff).map(d => [d.label ? d.label : d.name, d.name])
cont_opts = new Map(cont_vars)

viewof x_var = Inputs.select(cont_opts, {value: Array.from(cont_opts.values())[0], label: "X axis"})
viewof y_var = Inputs.select(cont_opts, {value: Array.from(cont_opts.values())[1], label: "Y axis"})
viewof color_var = Inputs.select(disc_opts, {value: Array.from(disc_opts.values())[1], label: "Color"})

default_color = d3.schemeCategory10[0]
plt_color = color_var || default_color

// Gets all the variables
all_vars = cont_vars.concat(disc_vars)
channels = Object.fromEntries(all_vars.map(k => [k[1], k[1]]))

viewof dodgePlot = Plot.plot({
  y: {grid: true},
  color: {legend: true},
  marks: [
    Plot.dot(d, Plot.dodgeX("middle", {fx: x_var, y: y_var, fill: plt_color}))
  ]
})

// This sets the placement
html`<div style="display: flex; flex-wrap: wrap; align-items: flex-end;">
 <div style="flex-basis: 25%"> ${viewof dodgePlot} </div>
</div>`